<script setup>
import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance,
  onBeforeUnmount,
  nextTick,
} from "vue";

import LivePlayer from "@liveqing/liveplayer-v3";

import { ElImage } from "element-plus";

import lodash from "lodash";
import GLOBAL from "@/utils/global";

const emit = defineEmits(["closeClick"]);

const props = defineProps({
  list: {
    type: Object,
    default: () => { },
  },
});

const closehandle = function () {
  emit("closeClick");
  if (window.poiEntity) {
    window.poiEntity.billboard.scale._value = 0.6;
  }
};

const videoUrl = ref('');
videoUrl.value = props.list.self.liveStreamUrl

onMounted(() => { });

onBeforeUnmount(() => {
  videoUrl.value = ''
});
</script>

<template>
  <div class="poiLayer">
    <div class="title">
      <span>基本信息</span>
      <div class="poiLayerclose" @click="closehandle"></div>
    </div>

    <div class="content">
      <div class="descItem">
        <div class="poilayer-item" v-for="(item, index) in props.list.write" :key="index">
          <div v-if="index !== 'ISVIDEO' && index !=='IMGURL' && index !=='ISIMG' ">
            <span class="name">{{ index }}</span>
            <span class="value">{{ item }}</span>
          </div>
        </div>
        <div class="poilayer-item" v-if="props.list.write.ISIMG">
          <el-image style="width: 100%; height: 160px" :src="props.list.write.IMGURL" fit="contain" />
        </div>
      </div>
      <div class="videobox" v-if="props.list.write.ISVIDEO">
        <LivePlayer :videoUrl="videoUrl" fluent aspect="fullscreen" autoplay live stretch />
        <div class="video-desc">{{ props.list.self.deviceInfo }}</div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.poiLayer {
  border: 1px solid #dce3ef;
  box-shadow: 1px 1px 2px 0px #eceefc;
  border-radius: 6px;
  background: #fffffc;
  border-radius: 5px;
  font-size: 16px;
  position: relative;
  min-width: 300px;
  padding: 0px 10px 15px 10px;
  box-sizing: border-box;
  overflow: hidden;
  color: #656565;

  .title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-weight: bold;

    span {
      display: inline-block;
      max-width: 200px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-left: 20px;
    }

    .poiLayerclose {
      pointer-events: all;
      cursor: pointer;
      width: 20px;
      height: 20px;
      background-image: url("@/assets/images/project/close.png") !important;
      background-repeat: no-repeat;
      background-size: 100% 100% !important;
      position: absolute;
      right: 25px;
      top: 10px;
    }
  }

  .content {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    position: relative;


    .videobox {
      float: left;
      width: 250px;
      height: 180px;
      position: relative;
      pointer-events: all;
      margin-left: 10px;

      :deep .player-wrapper {
        height: 150px;

        .video-inner {
          height: 150px;
        }
      }

      video {
        width: 100%;
        height: 100%;
      }

      .video-desc {
        text-align: center;
        font-size: 13px;
        margin-top: 5px;
      }
    }

    .descItem {
      max-width: 350px;
      float: left;

      div {
        width: 100%;
        margin-bottom: 5px;
        overflow: hidden;
      }

      div:last-child {
        margin-bottom: 0px;
      }

      .name {
        float: left;
        width: 130px;
        padding-right: 15px;
        font-size: 14px;
      }

      .value {
        max-width: 220px;
        float: left;
        color: #ffd325;
        font-size: 14px;
      }

      .poiimg {
        width: 200px;
        height: 200px;
        pointer-events: all;
        cursor: pointer;
        margin-left: 10px;
      }
    }
  }




}</style>
